<template>
  <div class="content">
    <div class="header fixed top-2 z-10 w-[100%] h-[80px]" :style="{ top: `${headerTop}px` }">
      <div class="smallheader w-[66%] h-[100%] flex justify-between">
        <div class="logo">
          <img src="http://competition.duoyu021.top/index/logo.png" alt="logo" />
        </div>
        <div class="navbox flex">
          <div v-for="(item, i) in navlist" :key="i" class="navson" :class="{ active: tab === i }" @click="selectNav(i)">
            {{ item.name }}
          </div>
        </div>

        <div class="menu" @click="isshow">
          <img src="http://competition.duoyu021.top/index/menu.png" alt="menu" class="menu-img">
        </div>

        <transition name="slide">
          <div class="menulist" v-show="shownav">
            <div v-for="(item, i) in navlist" :key="i" :class="{ active: tab === i }" @click="selectNav(i)">
              {{ item.name }}
            </div>
          </div>
        </transition>

        <div class="numbox">
          <img src="http://competition.duoyu021.top/index/tel.png" alt="电话" class="tel" />
          <div class="num">4009-700-700</div>
        </div>
      </div>
    </div>

    <div>
      <slot />
    </div>
    <div class="foot">
      <div class="footer">
        <div class="footleft">
          <ul>
            <li class="foottit">
              <nuxt-link to="/">首页</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">管理后台</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">活动报名</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">赛事直播</nuxt-link>
            </li>
          </ul>

          <ul>
            <li class="foottit">
              <nuxt-link to="/serviceintro">服务支持</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">服务介绍</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">服务列表</nuxt-link>
            </li>
          </ul>

          <ul>
            <li class="foottit">
              <nuxt-link to="/liveevent">实时赛事</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">赛事列表</nuxt-link>
            </li>
          </ul>

          <ul>
            <li class="foottit">
              <nuxt-link to="/callus">联系我们</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">电话:0917-8888888</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">手机:12345678901</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">QQ: 123456789</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">邮箱: 123456@qq.com</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/404">邮编:000000</nuxt-link>
            </li>
          </ul>
        </div>

        <div class="footright">
          <img src="http://competition.duoyu021.top/index/erweima.png" alt="">
        </div>
      </div>

      <div class="footend">
        <div class="endtit">
          <nuxt-link to="/404">Copyright @ 2020-2025 TanxianzheAll Rights
            Reserved.山东LY公司版权所有浙CP备19029460号-2
          </nuxt-link>
        </div>
      </div>

      <div class="telendtit">
        <nuxt-link to="/404">
          版权所有 @2017<br />
          地址:山东省泰安市贷岳区<br />
          苏ICP备1230012300号
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script setup>

const router = useRouter()
const navlist = ref(
  [
    {
      name: '首页',
      path: '/'
    },
    {
      name: '服务介绍',
      path: '/serviceintro'
    },
    {
      name: '实时赛事',
      path: '/liveevent'
    },
    {
      name: '联系我们',
      path: '/callus'
    },
  ]
)

const tab = ref(0)
const headerTop = ref(0)

const handleScroll = () => {
  headerTop.value = -window.scrollY
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

const selectNav = (i) => {
  tab.value = i
  router.push(navlist.value[i].path)
  // console.log(navlist.value[i].url,'url');
  shownav.value = false
}

const shownav = ref(false)

const isshow = () => {
  shownav.value = !shownav.value
}


// 接口
const { data } = await useAsyncData(
  () => {
    return getNav({});
  },
  {
    default: () => ({}),
  }
);
// console.log(data.value.data);
// console.log(data.value.data.data);
// const navlist = data.value.data.data;
// console.log(navlist,'navlist');

// 接口
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  position: fixed;
  display: flex;
  align-items: center;
}

.smallheader {
  margin: auto;
  display: flex;
  align-items: center;
}

.logo {
  width: 20%;
  display: flex;
  align-items: center;

  & img {
    max-width: 40%;
    max-height: 60%;
  }
}

.navbox {
  width: 40%;
  font-size: 16px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 8%;
}

.navson {
  padding: 8px 20px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
}

.navson:hover {
  padding: 8px 20px;
  box-sizing: border-box;
  background-color: #fff;
  color: #2b7ffe;
  border-radius: 18px;
  font-weight: bold;
}

.navson.active {
  padding: 8px 20px;
  box-sizing: border-box;
  background-color: #fff;
  color: #2b7ffe;
  border-radius: 18px;
  font-weight: bold;
}

.menu-img {
  display: none;
}

.menulist {
  display: none;
}

.numbox {
  width: 20%;
  display: flex;
  align-items: center;
}

.tel {
  width: 20px;
  height: 20px;
  object-fit: cover;
}

.num {
  margin-left: 10px;
  color: #ffffff;
}

/*
footer
 */
.foot {
  width: 100%;
  height: 500px;
  background-image: url("http://competition.duoyu021.top/index/bgfoot.png");
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer {
  width: 66%;
  margin: auto;
  color: #ffffff;
  display: flex;
}

.footleft {
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.foottit {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 40px;
}

li {
  margin-bottom: 20px;
}

.footright {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;

  & img {
    max-width: 100%;
    max-height: 100%;
  }
}

.footend {
  width: 100%;
  height: 60px;
  border-top: solid 3px #858385;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #adadae;

}

.telendtit {
  display: none;
}

/*
响应1500px
 */
@media screen and (max-width: 1500px) {
  .smallheader {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
  }

  .logo {
    width: 20%;
    display: flex;
    align-items: center;
  }

  .navbox {
    width: 38%;
    font-size: 16px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 10%;
  }

  .navson {
    padding: 8px 20px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
  }

  .navson:hover {
    padding: 8px 20px;
    box-sizing: border-box;
    background-color: #fff;
    color: #2b7ffe;
    border-radius: 18px;
    font-weight: bold;
  }

  .navson.active {
    padding: 8px 20px;
    box-sizing: border-box;
    background-color: #fff;
    color: #2b7ffe;
    border-radius: 18px;
    font-weight: bold;
  }

  .footer {
    width: 80%;
    margin: auto;
  }
}

/*
响应1200px
 */
@media screen and (max-width: 1200px) {
  .smallheader {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
  }

  .logo {
    width: 10%;
    display: flex;
    align-items: center;
  }

  .navbox {
    width: 60%;
    font-size: 16px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .navson {
    padding: 8px 20px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
  }

  .navson:hover {
    padding: 8px 20px;
    box-sizing: border-box;
    background-color: #fff;
    color: #2b7ffe;
    border-radius: 18px;
    font-weight: bold;
  }

  .navson.active {
    padding: 8px 20px;
    box-sizing: border-box;
    background-color: #fff;
    color: #2b7ffe;
    border-radius: 18px;
    font-weight: bold;
  }

  .footer {
    width: 98%;
    margin: auto;
  }
}

/*
响应768px
 */
@media screen and (max-width: 768px) {
  .smallheader {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
  }

  .logo {
    width: 20%;
    display: flex;
    align-items: center;
    margin-left: 10px;

    & img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .navbox {
    display: none;
  }

  .menu-img {
    display: block;
    width: 40px;
    height: 30px;
    object-fit: cover;
    margin-right: 20px;
    position: relative;
  }

  .menulist {
    position: absolute;
    top: 100%;
    right: 0;
    width: 40%;
    display: flex;
    background-color: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & div {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: black;
      cursor: pointer;
      border-bottom: solid 1px #858385;

      &:hover {
        background-color: #2b7ffe;
        color: #ffffff;
      }
    }
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: all .5s ease;
  }

  .slide-enter,
  .slide-leave-to {
    transform: translateY(-100%);
  }

  .numbox {
    display: none;
  }

  .foot {
    height: 300px;
  }

  .footer {
    width: 100%;
  }

  .footleft {
    display: none;
  }

  .footright {
    width: 100%;
  }

  .footend {
    display: none;
  }

  .telendtit {
    width: 100%;
    height: 100px;
    border-top: solid 3px #858385;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
  }
}
</style>
